<template>
	<a-layout id="components-layout-demo-top-side-2">
		<a-layout-header class="header" :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
			<a-row type="flex" justify="space-between" align="bottom">
				<a-col :span='4'>
					<div class="adminLogo">
						<img src="../images/logo.png" />
					</div>
				</a-col>
				<a-col>
					<div class="userTop">
						<a-popover placement="bottom" :class='"userContainer"' >
							<a-avatar :size="40" src="https://i.gtimg.cn/club/item/face/img/8/15918_100.gif" />
							<div class="userNmae">admin<span class="iconUs">
									<a-icon type="down" /></span></div>
							<template slot="content" :class='"userTipContainer"'>
								<div class="userTipItem">
									<a-icon type="user" />
								    个人中心
								</div>
								<div class="userTipItem">
									<a-icon type="api" />
									退出登陆
								</div>
							</template>
						</a-popover>
					</div>
				</a-col>
			</a-row>
		</a-layout-header>
		<a-layout class='myBoxSlider' :style="{marginTop: '64px' }">
			<a-layout-sider class='myBoxSlider' :style="{ overflow: 'auto', position: 'fixed', left: 0,zIndex:'10', }" width="200" breakpoint="xs"
			 collapsed-width="0" @collapse="onCollapse" @breakpoint="onBreakpoint">
				<div>
					<a-menu :default-selected-keys="[navCurKey]" :default-open-keys="['sub1']" mode="inline" theme="dark" :inline-collapsed="collapsed">
						<a-menu-item key="1" :style='{paddingRight:"34px"}'>
							<router-link to="/home" >
								<a-icon type="home" />
								<span>首页</span>
							</router-link>
						</a-menu-item>
						<a-sub-menu key="sub1">
							<span slot="title">
								<a-icon type="setting" /><span>配置</span></span>
							<a-menu-item key="2">
								<router-link to="/set/userManagement">用户管理</router-link>
							</a-menu-item>
							<a-menu-item key="3">
							角色管理
							</a-menu-item>
							<a-menu-item key="4">
							菜单管理
							</a-menu-item>
						
						</a-sub-menu>
						<a-sub-menu key="sub2">
							<span slot="title">
							<a-icon type="appstore" /><span>Navigation Two</span></span>
							<a-menu-item key="9">
								Option 9
							</a-menu-item>
							<a-menu-item key="10">
								Option 10
							</a-menu-item>
							<a-sub-menu key="sub3" title="Submenu">
								<a-menu-item key="11">
									Option 11
								</a-menu-item>
								<a-menu-item key="12">
									Option 12
								</a-menu-item>
							</a-sub-menu>
						</a-sub-menu>
					</a-menu>
				</div>
			</a-layout-sider>
			<a-layout :style="{padding:'24px 24px 0 24px',  marginLeft: '200px' }">
				<div class="homeNav">
					<a-breadcrumb>
						<a-breadcrumb-item href="">
							<a-icon type="home" />
						</a-breadcrumb-item>
						<a-breadcrumb-item href="">
							<a-icon type="user" />
							<span>Application List</span>
						</a-breadcrumb-item>
						<a-breadcrumb-item>
							Application
						</a-breadcrumb-item>
					</a-breadcrumb>
				</div>
				<a-layout-content  :class="[{'contentContainer':true}]" :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px',}">
					<div class="">
						<router-view />
					</div>
				</a-layout-content>
				<a-layout-footer style="text-align: center">
					快速爱聊天助手 © 2018 Created by Ant UED
				</a-layout-footer>
			</a-layout>
		</a-layout>

	</a-layout>
</template>
<script>




</script>

<style>
/* 	#components-layout-demo-top-side-2{
		min-width: 1200px;
	} */
	.myBoxSlider {
		min-height: -webkit-calc(100vh - 64px) !important;
		min-height: calc(100vh - 64px) !important;
		min-height: -moz-calc(100vh - 64px) !important;
	}

	#components-layout-demo-top-side-2 .logo {
		width: 120px;
		height: 31px;
		background: rgba(255, 255, 255, 0.2);
		margin: 16px 28px 16px 0;
		float: left;
	}
</style>


<script>
	// @ is an alias to /src
	import HelloWorld from "@/components/HelloWorld.vue";

	export default {
		name: "Home",
		data() {
			return {
				collapsed: true,
				navCurKey:'',
				columns: [{
						dataIndex: 'name',
						key: 'name',
						slots: {
							title: 'customTitle2'
						},
						sorter: true,

						scopedSlots: {
							customRender: 'name'
						},
						customRender: (text, row, index) => {
							console.log(row);
							console.log(index)
							// return <a href="javascript:;">{index}</a>;
							if (index == 3) {
								return <a href = "javascript:;" > {
									text
								} < /a>;
							}
							return {
								children: < a href = "javascript:;" > {
									text
								} < /a>,
								attrs: {
									colSpan: 3,
								},
							};
						},
					},
					{
						title: 'Age',
						dataIndex: 'age',
						key: 'age',
						width: 80,
						scopedSlots: {
							customRender: 'age'
						},
					},
					{
						title: 'Address',
						dataIndex: 'address',
						key: 'address 1',
						ellipsis: true,
						scopedSlots: {
							customRender: 'zjy'
						},
					},
					{
						title: 'Long Column Long Column Long Column',
						dataIndex: 'address',
						key: 'address 2',
						ellipsis: true,
					},

				],
				data: [


					{
						key: '1',
						name: 'John Brown',
						age: 32,
						address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
						tags: ['nice', 'developer'],
					},
					{
						key: '2',
						name: 'Jim Green',
						age: 42,
						address: 'London No. 2 Lake Park, London No. 2 Lake Park',
						tags: ['loser'],
					},
					{
						key: '3',
						name: 'Joe Black',
						age: 32,
						address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
						tags: ['cool', 'teacher'],
					},

					{
						key: '4',
						name: 'Joe Black',
						age: 32,
						address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
						tags: ['cool', 'teacher'],
					},
				]

			};

		},
		created() {
			console.log(this.$route)
			console.log(this.$route.meta)
			this.navCurKey=this.$route.meta.navkey;
			// console.log(this.$route);
			// this.$router.push({
			// 	name:'About',
			// 	 params: {id: 'value'},
			// 	 query:{
			// 		 test:2
			// 	 }
			// })
		},
		methods: {
			onCollapse(collapsed, type) {
				console.log(collapsed, type);
			},
			onBreakpoint(broken) {
				console.log(broken);
			},
			onPanelChange(value, mode) {
				console.log(value, mode);
			},
		},
		components: {
			HelloWorld
		}
	};
</script>
